<!DOCTYPE html><html><head><title>13-定位</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="13-定位">13-定位</h1>

<h3 id="一position定位">一、position定位</h3>

<p>position定位: 规定元素的定位类型 <br>
    static     没有定位，元素出现在正常的流中（默认值，可以忽略） <br>
    relative        相对定位，相对于其正常位置进行定位。 <br>
    A、不会脱离文档流； <br>
    B、不影响元素本身的特性； <br>
    C、如果没有定位偏移量，对元素本身没有任何影响； <br>
top | right | bottom | left  ：定位元素某方向偏移量。 <br>
<code>注：定位元素默认后者层级高于前者</code></p>

<blockquote>
  <p>absolute   绝对定位，参考最近非 static 定位的父级进行定位。</p>
  
  <ul><li>A、使元素完全脱离文档流；</li>
  <li>B、使inline支持宽高；</li>
  <li>C、块属性标签内容撑开宽度；</li>
  <li>D、没有定位父级则相对于body(整个文档)发生偏移；</li>
  <li>E、绝对定位一般配合相对定位使用；</li>
  <li>F、margin:auto失效；    </li>
  </ul>
  
  <p>fixed      固定定位，相对于浏览器窗口进行定位。与绝对定位的特性一致 <br>
  Z-index：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（可负值） <br>
  注：只在定位元素上才能生效</p>
</blockquote></div></body></html>